<template>
	<view>
		<view class="edit">
			<form action="" @submit="onSubmit">
				<view class="item">
					<input v-model="formValue.title" type="text" name="title" placeholder="请输入标题"/>
				</view>
				<view class="item">
					<input v-model="formValue.author" type="text" name="author" placeholder="请输入作者"/>
				</view>
				<view class="item">
					<textarea name="content" placeholder="请输入详情内容" v-model="formValue.content"></textarea> 
				</view>
				<view class="item">
					<uni-file-picker 
						v-model="imageValue" 
						fileMediatype="image" 
						@progress="progress" 
						mode="grid" 
						@success="uploadSuccess" 
						
					/>
				</view>
				<view class="item">
					<button form-type="reset"> 重置</button>
					<button form-type="submit" type="primary" :disabled="inDisabled(formValue) || this.isUpload"> 提交</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:"",
				imageValue:[],
				isUpload:false,
				picurls:[],
				formValue:{
					title:"",
					author:"",
					content:""
				}
			};
		},
		onLoad(e){
			this.id = e.id;
			this.getDetail()
		},
		methods:{
			//图片上传成功
			uploadSuccess(e){
				this.picurls = e.tempFilePaths
				console.log(this.imageValue)
			},
			progress(e){
				
				let prge = e.progress
				if(prge!=100){
					this.isUpload = true
				}else{
					this.isUpload = false
				}
			},
			//获取详情
			getDetail(){
				uniCloud.callFunction({
					name:"art_get_row",
					data:{
						id:this.id
					}
				}).then(res=>{
					console.log(res)
					
					this.loadingState = true
					this.formValue=res.result.data[0]
					//这里多看看
					if(!this.formValue.picurls) return
					let urls = this.formValue.picurls.map(item=>{
						return {url:item}
					})
					this.imageValue=urls
					
				})
			},
			onSubmit(e){
				let _picurls = this.imageValue.map(item=>{
					return item.url;
				})
				uniCloud.callFunction({
					name:"art_update_row",
					data:{
						detail:this.formValue,
						picurls:_picurls
					}
				}).then(res=>{
					uni.showToast({
						title:"修改成功"
					})
					setTimeout(()=>{
						uni.navigateBack()
					},800)
				})
			},
			//判断按钮是否禁用
			inDisabled(obj){
				// for(let key in obj){
				// 	if(!obj[key]){
				// 		return true
				// 	}
				// }
				let bool = Object.keys(obj).some((key,value)=>{
					return obj[key]==''
				})
				return bool
			}
		}
	}
</script>

<style lang="scss" scoped>
.edit{
	padding: 30rpx;
	.item{
		padding-bottom: 20rpx;
		input,textarea{
			border: 1rpx solid #eee;
			height: 80rpx;
			padding: 0 20rpx;
		}
		textarea{
			height: 200rpx;
			width: 100%;
			box-sizing: border-box;
		}
		button{
			margin-bottom: 20rpx;
		}
	}
}
</style>
